/* Chat component styles leveraging design tokens */
@import './skeleton.css';

/* Spacing and type values aligned to design tokens */
.c-chat-wrapper {
  background: var(--color-surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-elevation-3);
  container-type: inline-size;
  /* Wrapper around the chat page, extends the global container */
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--header-height));
  overflow: hidden;
}

/* Header styling is centralized in theme.css via `.c-app-header` */

.c-chat-wrapper h1 {
  font-size: var(--font-size-4);
  font-weight: 600;
}

.c-chat-container {
  background: var(--color-subtle-bg-alt);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  padding: var(--space-5);
}

.c-message {
  animation: fadeIn var(--duration-normal) var(--easing-standard);
  border-radius: var(--radius-l);
  max-width: 85%;
  padding: var(--space-4) var(--space-5);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(var(--space-3));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.c-user-message {
  align-self: flex-end;
  background: var(--gradient-primary);
  border-bottom-right-radius: var(--radius-xs);
  color: var(--color-white);
}

.c-ai-message {
  align-self: flex-start;
  background: var(--color-subtle-bg-hover);
  border-bottom-left-radius: var(--radius-xs);
  box-shadow: var(--shadow-elevation-1);
  color: var(--color-text-deep);
}

.c-typing-indicator {
  align-self: flex-start;
  background: var(--color-subtle-bg-hover);
  border-radius: var(--radius-l);
  display: none;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-5);
}

.c-typing-dot {
  animation: pulse calc(var(--duration-slow) * 3) infinite;
  background: var(--color-gray-medium);
  border-radius: 50%;
  display: inline-block;
  height: var(--space-2);
  margin-right: var(--space-1);
  width: var(--space-2);
}

.c-typing-dot:nth-child(2) {
  animation-delay: var(--duration-fast);
}

.c-typing-dot:nth-child(3) {
  animation-delay: calc(var(--duration-fast) * 2);
}

/* Pulse animation moved to theme.css */

@media (prefers-reduced-motion: reduce) {
  .c-message,
  .c-typing-dot {
    animation: none;
  }
}

.c-input-area {
  align-items: flex-end;
  background: var(--color-surface);
  border-top: var(--border-1);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
}

.c-message-input {
  background: var(--color-subtle-bg-alt);
  border: var(--border-0);
  border-radius: var(--radius-l);
  color: var(--color-text);
  flex: 1;
  font-size: var(--font-size-2);
  max-height: calc(var(--space-10) + var(--space-7) + var(--space-2));
  padding: var(--space-4) var(--space-5);
  resize: none;
}

.c-message-input:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.c-btn-container {
  display: flex;
  gap: var(--space-3);
}

/* Icon-style chat buttons */
.c-send-btn,
.c-reset-btn {
  align-items: center;
  aspect-ratio: 1;
  block-size: var(--space-8);
  display: flex;
  inline-size: var(--space-8);
  justify-content: center;
  padding: var(--space-3);
}

.c-send-btn svg,
.c-reset-btn svg {
  block-size: var(--space-5);
  inline-size: var(--space-5);
  pointer-events: none;
}

.c-info-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-1);
  padding: var(--space-3);
  text-align: center;
}

@media (max-width: 30rem) {
  .c-input-area {
    padding: var(--space-5);
  }

  .c-input-area .c-message-input {
    flex: 1;
    padding: var(--space-5);
  }

  .c-input-area .c-send-btn {
    border-radius: 50%;
  }

  .c-input-area .c-send-btn,
  .c-input-area .c-reset-btn {
    block-size: var(--space-7);
    inline-size: var(--space-7);
    padding: var(--space-2);
  }

  .c-input-area .c-send-btn svg,
  .c-input-area .c-reset-btn svg {
    block-size: var(--space-4);
    inline-size: var(--space-4);
  }
}

@container (max-width: 37.5rem) {
  .c-chat-wrapper {
    border-radius: 0;
    height: calc(100dvh - var(--header-height));
  }
  .c-btn-container {
    flex-direction: column;
  }

  .c-message {
    max-width: 90%;
  }

  .c-input-area {
    padding-bottom: calc(var(--space-4) - (var(--space-1) / 4) + env(safe-area-inset-bottom));
  }
}
/* copy button uses .rounded-4 utility */

.c-copy-btn {
  background: var(--color-border-muted);
  border: var(--border-2);
  bottom: var(--space-2);
  color: var(--color-text-deep);
  cursor: pointer;
  display: none;
  font-size: var(--font-size-0);
  left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  position: absolute;
  z-index: 1;
}
.c-copy-btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.c-ai-message:hover .c-copy-btn,
.c-ai-message.is-copy-visible .c-copy-btn {
  display: inline-block;
}

.c-ai-message {
  position: relative;
}

/* Loading indicator styles */
/*
  Full-bleed loading indicator：让加载条“视觉上忽略”父容器的 padding

  原理：
  - 父级 .c-chat-container 设有 padding: var(--space-5)。
  - 这里用负的 margin-inline / margin-block 抵消父级 padding，
    并把 width 扩大 2 × padding，使组件横向（及可选的纵向）满出到容器外边缘。
  - 采用逻辑方向属性（margin-inline / margin-block），自动适配 LTR/RTL 和书写模式。

  使用要求：
  - 确保父级使用与此处一致的间距变量：
      .c-chat-container { padding: var(--space-5); }
  - 若只需横向满出，删除 margin-block-start / margin-block-end 两行即可。

  注意事项：
  - 若父级有 overflow: hidden 或 border-radius，满出部分可能被裁剪；
    需要时把裁剪/圆角放到更外层容器。
  - 若有层叠问题，可酌情增加 z-index；或改用绝对定位的覆盖层方案。
*/
.c-loading-indicator {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  flex: 1;
  justify-content: center;
  /* 顶到容器的上/下边缘，就加这两行 */
  margin-block-end: calc(-1 * var(--space-5));
  margin-block-start: calc(-1 * var(--space-5));
  /* 横向满出到容器边缘 */
  margin-inline: calc(-1 * var(--space-5));
  padding: var(--space-5);
  position: relative;
  text-align: center;
  width: calc(100% + 2 * var(--space-5));
}

.c-loading-indicator-text {
  position: relative;
  z-index: 1;
}

/* Disabled state styling */
.c-message-input:disabled {
  background: var(--color-subtle-bg);
  cursor: not-allowed;
}

/* Enhancement progress indicator */
/* Styles moved to theme.css for reuse */

/* Basic mode styles applied when enhancement libraries fail to load */
.is-basic-mode .c-ai-message {
  background: var(--color-subtle-bg);
  border: var(--border-1);
}

.is-basic-mode .c-ai-message pre {
  background: var(--color-subtle-bg-hover);
  overflow: auto;
  padding: var(--space-3);
  white-space: pre-wrap;
}

/* Temporary hint message */
.c-hint-message {
  background: var(--overlay-dark-bg);
  border-radius: var(--radius-xs);
  bottom: var(--space-10);
  color: var(--color-white);
  left: 50%;
  padding: var(--space-2) var(--space-4);
  position: fixed;
  transform: translateX(-50%);
  transition: opacity var(--duration-normal) var(--easing-standard);
  z-index: 1000;
}

body.is-embedded {
  background: transparent;
  padding: 0;
}

body.is-embedded nav {
  display: none;
}

body.is-embedded .c-chat-wrapper {
  height: 100dvh;
}
